<template>
	<view class="custom_vertical_list_card" :style="item.style.parent">
		<view class="custom_vertical_list_card_header" :style="item.style.header">
			<view class="custom_vertical_list_card_header_title">{{ item.title }}</view>
			<view class="custom_vertical_list_card_header_handle"><slot name="cardheader" :items="item"></slot></view>
		</view>
		<view class="custom_vertical_list_card_content" :style="item.style.content"><slot name="cardcontent" :items="item"></slot></view>
	</view>
</template>

<script>
export default {
	name: 'custom-vertical-list-card',
	props: {
		item: {
			type: Object,
			default() {
				return {
					title: 'undefined',
					style: {
						parent: {},
						header: {},
						content: {}
					}
				};
			}
		}
	},
	data() {
		return {};
	}
};
</script>

<style lang="less">
.custom_vertical_list_card {
	overflow: hidden;
	.custom_vertical_list_card_header {
		font-size: 28rpx;
		padding: 10rpx 0;
		display: flex;
		.custom_vertical_list_card_header_title {
			width: 50%;
			text-align: left;
			text-indent: 20rpx;
		}
		.custom_vertical_list_card_header_handle {
		}
	}
	.custom_vertical_list_card_content {
	}
}
</style>
